<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom" addHeight>
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">气象雷达</block>
		</cu-custom>

		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<u-tabs
				active-color="#fff"
				inactive-color="#fff"
				bg-color="#2695FE"
				style="height: 80rpx"
				:bold="false"
				font-size="28"
				:list="list"
				:is-scroll="false"
				:current="current"
				@change="changeTabs"
			></u-tabs>
			<view class="app-box-content">
				<pingtu v-if="pageCur == 'radar1'"></pingtu>
				<danzhan v-if="pageCur == 'radar2'"></danzhan>
				<xiangkong v-if="pageCur == 'radar3'"></xiangkong>
			</view>
		</view>
	</view>
</template>

<script>
	import pingtu from '@/components/monitor/meteo-radar/pingtu.vue'
	import danzhan from '@/components/monitor/meteo-radar/danzhan.vue'
	import xiangkong from '@/components/monitor/meteo-radar/xiangkong.vue'
	export default {
		data() {
			return {
				appHeight: 0,
				current: 0,
				pageCur: 'radar1',
				list: [
					{ name: '雷达拼图', value: 'radar1' },
					{ name: '单站雷达', value: 'radar2' },
					{ name: '相控阵雷达', value: 'radar3' }
				]
			}
		},
		components: {
			pingtu,
			danzhan,
			xiangkong
		},
		mounted() {
			this.statPage()
		},
		methods: {
			async statPage() {
				this.appHeight = await this.$getHeight('.nav-custom')
			},
			changeTabs(index) {
				this.current = index
				this.pageCur = this.list[index].value
			}
		}
	}
</script>

<style lang="less">
	.app-box {
		width: 100%;
		.app-box-content {
			height: calc(100% - 80rpx);
		}
	}
</style>
